<body>
  <div style="font-size: 40px">
    <p>
      系统事件：键盘:
      <a href="javascript:keyUp()">上</a>
      |<a href="javascript:keyDown()">下</a>
      <a href="javascript:keyLeft()">左</a>
      <a href="javascript:keyDown()">右</a>
    </p>
    <!-- <p>鼠标:<a href="javascript:fireMouseEvent('mousedown')">MouseDown</a></p> -->

    <p>自定义事件:<a href="javascript:callMyEvent()">MyEVENT</a></p>
  </div>
  <div>
    <iframe
      src="../game/testkb/web-mobile/index.html"
      style="width: 720px; height: 1280px"
      id="iFrame"
    >
    </iframe>
  </div>
  <script>
    function keyDown() {
      fireKeyEvent("keydown", "ArrowDown", "ArrowDown", 40);
    }
    function keyLeft() {
      fireKeyEvent("keydown", "ArrowLeft", "ArrowLeft", 37);
    }
    function keyUp() {
      fireKeyEvent("keydown", "ArrowUp", "ArrowUp", 38);
    }
    function keyRight() {
      fireKeyEvent("keydown", "ArrowRight", "ArrowRight", 39);
      //fireKeyEvent("keydown", "KeyD");
    }

    // 测试另外一种发送事件的方式
    function fireKeyEvent2(type, _key, _code, _keyCode) {
      var e = new KeyboardEvent(type, {
        key: _key,
        keyCode: _keyCode,
        code: _code,
        ctrlKey: false,
        shiftKey: false,
        altKey: false,
        metaKey: false,
        bubbles: false,
        cancelable: false,
      });

      var myFrame = document.getElementById("iFrame").contentWindow;
      var game = myFrame.document.getElementById("GameDiv");

      console.log(chrome);

      chrome.debugger.attach(game, "1.2", function () {
        chrome.debugger.sendCommand(target, "Input.dispatchKeyEvent", e);
      });
    }

    function fireKeyEvent(type, _key, _code, _keyCode) {
      var e = new KeyboardEvent(type, {
        key: _key,
        keyCode: _keyCode,
        code: _code,
        ctrlKey: false,
        shiftKey: false,
        altKey: false,
        metaKey: false,
        bubbles: false,
        cancelable: false,
      });

      var myFrame = document.getElementById("iFrame").contentWindow;
      var game = myFrame.document.getElementById("GameCanvas");
      game.dispatchEvent(e);
      // console.log("before", e);
      // let a = myFrame.dispatchEvent(e);
      // console.log("after", a);
    }

    function fireMouseEvent(type) {
      //var e = new MouseEvent("MouseEvents");
      e = document.createEvent("MouseEvents");

      e.initMouseEvent(
        "mousedown", //type
        true, //bubble
        true, //cancelable
        window, //view
        0, //detail
        100, //screenX
        200, //screenY
        300, //clientX
        400, // clientY
        false, // ctrl-key
        false, //alt-key
        false, //shift-key
        false, //metakey
        0 //button--那个鼠标键
        // relatedTarget 与事件相关对象
      );
      console.log("mouseEvent", e);
      var myFrame = document.getElementById("iFrame").contentWindow;
      var game = myFrame.document.getElementById("GameCanvas");

      game.dispatchEvent(e);
    }

    // cocos 3.x 版本模拟按键事件
    function fireKeyEvent3(type, code) {
      //var e = new MouseEvent("MouseEvents");
      e = document.createEvent("UIEvents");

      delete e.keyCode;
      Object.defineProperty(e, "code", { value: code });

      e.initUIEvent("keydown", true, true, window, 1);

      e.key = String.fromCharCode(65);

      console.log("keyEvent", e);
      var myFrame = document.getElementById("iFrame").contentWindow;
      var game = myFrame.document.getElementById("GameCanvas");

      game.dispatchEvent(e);
    }

    function fireMyEvent() {
      const e = new CustomEvent("customEvent", {
        detail: {
          message: "Hello, world!",
        },
      });
      var myFrame = document.getElementById("iFrame").contentWindow;
      var game = myFrame.document.getElementById("GameCanvas");
      game.dispatchEvent(e);
    }

    function callMyEvent() {
      var myFrame = document.getElementById("iFrame").contentWindow;
      let win = myFrame.window;

      console.log(win.MY_EVENT_MANAGER);
      let em = win.MY_EVENT_MANAGER;
      let myObject = { "name:": "abc", "age:": 13 };
      em.emit("MYEVENT", myObject);
    }
  </script>
</body>
